.navs {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .navs-area {
    margin-left: 70px;
    height: 60px;
    .et-flex-start();

    .nav-item {
      height: 100%;
      padding: 0 20px;
      cursor: pointer;
      user-select: none;
      font-size: @font-size-large;
      .et-flex-start();

      &.actived {
        color: @primary-color;
      }

      .expendIcon {
        margin-left: 5px;
        transition: all .2s;
      }

      &:hover {
        .expendIcon {
          transform: rotate(180deg);
        }
      }
    }
  }
}

.expendCard {
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .expendCardContainer {
    height: 260px;
    box-sizing: border-box;
    padding: 20px;
    .et-flex-normal();

    .card-part {
      padding: 0 5px;
      height: 100%;
      box-sizing: border-box;
      .et-flex-column-normal();

      .part-title {
        padding: 5px;
        flex-shrink: 0;
        font-size: 15px;
        .et-flex-start();

        .title-icon-box {
          width: 20px;
          height: 20px;
          margin-right: 3px;
          .et-flex-center();

          .title-icon {
            width: 16px;
          }
        }
      }

      .part-list {
        height: 100%;
        flex-shrink: 1;
        .et-flex-column-normal();
        flex-wrap: wrap;

        .part-item {
          padding: 5px;
          cursor: pointer;
        }
      }
    }
  }

  .expendCardFooter {
    width: 100%;
    padding: 10px;
    border-top: 1px solid #e1e1e1;
    box-sizing: border-box;
    .et-flex-center();

    .seeMore {
      padding: 0 20px;
      height: 28px;
      border-radius: $height;
      background-color: rgba(@primary-color, .1);
      color: @primary-color;
      line-height: $height;
      text-align: center;
      cursor: pointer;
      user-select: none;
    }
  }
}